<template>
  <div>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="3">
          <el-input placeholder="请输入批次id" size="small" class="input-with-select" v-model="queryInfo.id" clearable
                    @clear="getCouponBatchList"/>
        </el-col>
        <el-col :span="4">
          <el-input placeholder="请输入标题" size="small" class="input-with-select" v-model="queryInfo.name" clearable
                    @clear="getCouponBatchList"/>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" size="small" style="margin-left: 10px;" @click="getCouponBatchList">搜索</el-button>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" size="small" @click="showEditDialog('')">添加</el-button>
        </el-col>
      </el-row>
      <el-table :data="couponBatchList" border stripe>
        <el-table-column label="批次ID" prop="id" width="70"></el-table-column>
        <el-table-column label="名称" prop="name"></el-table-column>
        <el-table-column label="总数量" prop="quantity" width="100"></el-table-column>
        <el-table-column label="已绑定" prop="bindedQuantity" width="100"></el-table-column>
        <el-table-column label="已使用" prop="usedQuantity" width="100"></el-table-column>
        <el-table-column label="有效期">
          <template slot-scope="scope">
            <span>{{scope.row.startDate}} 至 {{scope.row.endDate}}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="statusText" width="100">
          <template slot-scope="scope">
            <span type="primary">{{ scope.row.statusText }}</span>
          </template>
        </el-table-column>
        <el-table-column label="卡券明细" prop="statusText" width="120">
          <template slot-scope="scope">
            <router-link :to="{path:'/coupon/list',query:{batchId:scope.row.id}}">卡券明细</router-link>
          </template>
        </el-table-column>
        <el-table-column label="修改" width="100">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status=='C'" type="warning" size="mini" @click="setActive(scope.row.id)">激活</el-button>
            <el-button type="warning" v-if="scope.row.status=='Y'" size="mini" @click="lockBatch(scope.row.id)">冻结</el-button>
            <el-button type="warning" v-if="scope.row.status=='L'" size="mini" @click="unLockBatch(scope.row.id)">解除冻结</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="queryInfo.pageNo" :page-sizes="[5, 10, 20]"
                     :page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </el-card>

    <el-dialog title="批次信息" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
      <el-form :model="editForm"  ref="editFormRef" label-width="90px" class="demo-ruleForm">
        <el-form-item label="名称" prop="name">
          <el-input v-model="editForm.name" style="width: 80%;"></el-input>
        </el-form-item>
        <el-form-item label="面额" prop="facePrice">
          <el-input v-model="editForm.facePrice" style="width: 90px"></el-input>
        </el-form-item>
        <el-form-item label="数量" prop="quantity">
          <el-input v-model="editForm.quantity" style="width: 90px"></el-input>&nbsp;该批次需要生成卡券的数量，不超过100000
        </el-form-item>
        <el-form-item label="满减" prop="rate">
          <el-input v-model="editForm.fullAmount" style="width: 90px"></el-input>&nbsp;输入80表示订单金额>=80才可以使用该批次的券
        </el-form-item>
        <el-form-item label="有效天数" prop="rate">
          <el-input v-model="editForm.validDays" style="width: 90px"></el-input>&nbsp;绑定时刻开始算的有效天数
        </el-form-item>
        <el-form-item label="有效期" prop="startDate">
          <el-date-picker
              v-model="editForm.startDate"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择开始时间">
          </el-date-picker>--
          <el-date-picker
              v-model="editForm.endDate"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择结束时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveCouponBatch()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Api from "@/api/Api.js";

export default {
    data() {
      return {
        drawer: false,
        dialogVisible: false,
        disabled: false,
        queryInfo: {
          id: "",
          name:'',
          pageNo: 1,
          pageSize: 20, // 页大小
        },
        editDialogVisible: false,
        editForm: {
          id: ''
        },
        couponBatchList: [],
        total: 0
      };
    },
    created() {
      this.getCouponBatchList();
    },
    methods: {
      getCouponBatchList() {
        Api.getCouponBatchList(this.queryInfo).then((res) => {
          if (res.success) {
            this.couponBatchList = res.data.records;
            this.total = res.data.total;
          } else {
            return this.$message.error("获取列表失败");
          }
        });
      },
      saveCouponBatch() {
        Api.saveCouponBatch(this.editForm).then((res) => {
          if (res.success) {
            this.$message.success("保存成功");
            this.editDialogVisible = false;
            this.getCouponBatchList();
          } else {
            return this.$message.error("保存失败：" + res.msg);
          }
        });
      },
      setActive(id) {
        this.$confirm('确定要激活批次吗?', '提示', {
          confirmButtonText: '激活',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(async () => {
          Api.setCouponBatchSetActive({'id':id}).then((res) => {
            if (res.success) {
              this.$message.success("激活成功");
              this.editDialogVisible = false;
              this.getCouponBatchList();
            } else {
              return this.$message.error("保存失败：" + res.msg);
            }
          });
        })
      },
      lockBatch(id) {
        this.$confirm('确定要冻结批次吗?', '提示', {
          confirmButtonText: '冻结',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(async () => {
          Api.setCouponBatchLock({'id':id}).then((res) => {
            if (res.success) {
              this.$message.success("冻结成功");
              this.editDialogVisible = false;
              this.getCouponBatchList();
            } else {
              return this.$message.error("保存失败：" + res.msg);
            }
          });
        })
      },
      unLockBatch(id) {
        this.$confirm('确定要解除冻结批次吗?', '提示', {
          confirmButtonText: '解除冻结',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(async () => {
          Api.setCouponBatchUnLock({'id':id}).then((res) => {
            if (res.success) {
              this.$message.success("解除冻结成功");
              this.editDialogVisible = false;
              this.getCouponBatchList();
            } else {
              return this.$message.error("保存失败：" + res.msg);
            }
          });
        })
      },
      async showEditDialog(id) {
        Api.getCouponBatch({'id':id}).then(res => {
          if (res.success) {
            this.editForm = res.data
            this.editDialogVisible = true
          } else {
            return this.$message.error('查询失败')
          }
        })
      },
      editDialogClosed() {

      },
      handleSizeChange(pageSize) {
        this.queryInfo.pageSize = pageSize;
        this.getCouponBatchList();
      },
      handleCurrentChange(pageNo) {
        this.queryInfo.pageNo = pageNo;
        this.getCouponBatchList();
      },
    }
};
</script>

<style lang="less" scoped>
.logo_pic {
  max-width: 100px;
}
.upload_img {
  width: 148px;
  height: 148px;
  object-fit: cover;
  border-radius: 6px;
  margin-right: 20px;
}
</style>
